<!-- 
@Description: 首页
@Author: fcg 
-->
<template>
	<view class="home">
		<view class="holder-content">
			<view class="bg">

			</view>
			<view id="fixed-top" class="fixed-top">
				<u-navbar title=" " bgColor="transparent">
					<view class="map-icon cg-align-center " slot="left" @click="chooseLocation">
						<u-icon name="map" color="#FFFFFF"></u-icon>
						<view class="cg-fz-24 cg-ml-10 cg-ellipsis" style="width: 100rpx;">
							{{address}}
						</view>
					</view>
					<view class="cg-align-center search" style="padding-left: 160rpx;" slot="center">
						<!-- <view class="place">

						</view> -->
						<view class="cg-flex1">

							<u-search v-model="searchParams.searchName" @search="onSearch" :showAction="false"
								shape="round" bgColor="#F9F9F9" placeholder="输入"></u-search>
						</view>
					</view>

				</u-navbar>

				<view class="banner-place">
					<view class="banner">
						<u-swiper :list="banner" @change="e => current = e.current" height="330rpx">
							<view slot="indicator" class="indicator">
								<view class="indicator__dot" v-for="(item, index) in banner" :key="item.fullPath"
									:class="[index === current && 'indicator__dot--active']">
								</view>
							</view>
						</u-swiper>
					</view>

				</view>
			</view>

			<view class="menu cg-align-center cg-space-around">

				<swiper circular style="width: 552rpx; height: 180rpx;flex:4" duration="100">

					<swiper-item class=" cg-flex cg-align-center cg-space-around " v-for="(item,index) in menu"
						:key="index">
						<view class="menu-item" v-for="(menu,d) in item" :key="d" @click="toPage(item,index)">
							<cg-image :src="menu.iconUrl" width="64rpx" height="64rpx" type="cdn"></cg-image>
							<view class="menu-item-title cg-text-center">
								{{menu.subjectName}}
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="menu-item cg-flex1" @click="toPage(lastMenu)">
					<cg-image :src="lastMenu.iconUrl" width="64rpx" height="64rpx" type="cdn"></cg-image>
					<view class="menu-item-title cg-text-center">
						{{lastMenu.subjectName}}
					</view>
				</view>
			</view>



			<view class="filter-place">
				<view>
					<cg-filter :list="filterList" @click="onFilterClick">
						<view class="" slot="right" style="padding-left: 4px;" @click="mode = !mode">
							<view class="cg-main-color cg-align-center" v-if="mode">
								<text class="cg-mr-10">模式1</text>

							</view>
							<view class="cg-main-color cg-align-center" v-else>
								<text class="cg-mr-10">模式2</text>

							</view>
						</view>

					</cg-filter>
				</view>
			</view>

		</view>



		<!-- 筛选选择 -->
		<!-- #ifndef APP-PLUS -->
		<pickerGroup ref="pickerGroup" @onSearch="searchByPicker"></pickerGroup>
		<cg-popup v-model="popup">
			<click-user-info :detail="detail" @close="popup = false"></click-user-info>
		</cg-popup>
		<!-- #endif -->

		<cg-custom-alert></cg-custom-alert>

	</view>
</template>

<script>
	// #ifndef APP-PLUS
	import clickUserInfo from '@/pages/index/subNVue/popup.nvue';
	import pickerGroup from '@/pages/index/subNVue/picker.nvue';
	// #endif

	export default {
		// #ifndef APP-PLUS
		components: {
			clickUserInfo,
			pickerGroup
		},
		// #endif
		data() {
			return {



				mode: false,

				filterList: [{
					name: '测试1',
					type: 0,
					field: 'test'
				}, {
					name: '测试2',
					type: 1,
					field: 'test'
				}, {
					name: '测试3',
					type: 2,
					field: 'test'
				}, {
					name: '测试4',
					type: 3,
					field: 'test'
				}, {
					name: '测试5',
					type: 5,
					field: 'test'
				}],

				current: 0,

				list: [],
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				page: 1,
				status: 'loading',
				menu: [],
				lastMenu: {
					subjectName: '全部',
					iconUrl: ''

				}, //最后一个数组


				popup: false,

				address: '请选择',

				searchParams: {

				},
				pickerNVue: null,
				popNVue: null,
				detail: {}

			}
		},

		async created() {
			await this.$getConfig;
			this.$store.dispatch('setDirtyFlag')
			uni.$on('homeRefresh', () => {
				Object.keys(this.searchParams).forEach(key => this.searchParams[key] = '');
				this.onSearch()
			})
			// #ifdef APP-PLUS
			this.pickerNVue = uni.getSubNVueById('picker')
			uni.$on('subNVuePickerConfirm', res => {
				this.pickerNVue.hide()
				this.searchByPicker(res);
			})
			uni.$on('closeSubNVue', res => {
				this.pickerNVue.hide();
				this.popNVue.hide();
			})
			// #endif

		},
		beforeDestroy() {
			// #ifdef APP-PLUS
			uni.$off('subNVuePickerConfirm')
			uni.$off('closeSubNVue')
			// #endif
		},
		options: {
			styleIsolation: 'shared'
		},
		mounted() {

		},
		methods: {
			getData(params) {
				console.log('params:',params);
			},
			async chooseLocation() {
				const res = await this.$utils.chooseLocation();
				console.log('res', res);
				this.address = res.address;
				this.searchParams.latitude = res.latitude;
				this.searchParams.longitude = res.longitude;
				this.$CGStore('$position', res)
			},
			onFilterClick(item, index) {
				// console.log('item,index', item, index);
				// #ifdef APP-PLUS
				this.pickerNVue.show('slide-in-bottom', 120, () => {
					uni.$emit('openPicker', item)
				});

				// #endif
				// #ifndef APP-PLUS
				// console.log('this.$refs.pickerGroup.$refs[item.field]', this.$refs.pickerGroup.$refs[item.field]);
				if (this.$refs.pickerGroup.$refs[item.field]) {
					this.$refs.pickerGroup.$refs[item.field].click()
				}
				// #endif


			},

			toPage(item, index) {
				// console.log('item', item,index);
				this.$CGRouter.push(item.path, {
					title: item.title || item.subjectName
				})
			},

			openPopup() {
				// #ifdef APP-PLUS
				// 通过 id 获取 nvue 子窗体  
				this.popNVue = uni.getSubNVueById('popup')
				// 打开 nvue 子窗体  
				this.popNVue.show('slide-in-bottom', 300, () => {
					uni.$emit('clickUserInfo', this.clickUserInfo)
				});
				// #endif
				// #ifndef APP-PLUS
				this.popup = true
				// #endif
			},



			searchByPicker(item) {
				console.log('searchParams', item);
				this.searchParams = {
					...this.searchParams,
					...item
				}
				this.list = [];
				this.status = 'loading';
				this.getList()
			},
			onSearch() {
				this.list = [];
				this.page = 1;
				this.status = 'loading';
				this.getList()
			},
			async getList() {
				console.log('1', 1);
				try {
					const {
						rows: list
					} = await teacherList(this.searchParams);
					console.log('data', list);
					if (this.page === 1) {
						this.list = []
					}
					this.markList = [];
					this.list = list;
					this.list.forEach(item => {
						this.markList.push({
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							title: item.nickName,
							iconPath: '/static/image/marks.png', //图标
							width: "36", //图标宽度
							height: "36", //图标高度
						})
					})


				} catch (e) {}
				uni.stopPullDownRefresh()
				console.log('898', 898);
				this.status = 'finished'



			},
			async getBanner() {

				bannerList().then(res => {
					res.data.forEach(item => {
						item.fullPath = this.getFilePath(item.bannerUrl)
					})
					this.banner = res.data;
				});

				subjectAndIcon().then(res => {
					res.data.forEach(item => {
						item.path = '/pages/member/teacher-list'
					})

					this.menu = [];
					this.lastMenu = res.data.pop();

					for (let i = 0; i < res.data.length; i += 4) {
						this.menu.push(res.data.slice(i, i + 4));
					}
					console.log('this.menu', this.menu, this.lastMenu);
				})
			}
		},


	}
</script>

<style lang="scss" scoped>
	.home {
		.holder-content {

			background-color: #FFFFFF;

			.bg {
				z-index: 1;
				width: 750rpx;
				height: 458rpx;
				position: fixed;
				left: 0;
				top: 0;
				// background: linear-gradient(180deg, #00C690 0%, rgba(0, 198, 144, 0) 100%);
				background: linear-gradient($themeColor 0%, #FFFFFF 100%);
			}

		}

		.fixed-top {
			padding: 0 30rpx;
		}

		.filter-place {
			height: 88rpx;
			padding: 0 30rpx;
			padding-left: 10rpx;

			.filter-box {
				background-color: #ffffff;
				position: fixed;
				// width: 690rpx;
				z-index: 1;
				padding-right: 30rpx;
			}
		}

		.map-box {
			padding: 30rpx;

			.map {
				width: 690rpx;

				border-radius: 16rpx;
			}
		}

		.map-icon {
			min-width: 120rpx;
			color: #ffffff;
			z-index: 1;
		}

		.search {
			opacity: 0.8;
			padding-right: 30rpx;
			width: 100%;

			:deep(.u-search__content)  {
				border-bottom-right-radius: 0 !important;
			}

			.place {
				width: 160rpx;
			}
		}

		.banner-place {
			height: 360rpx;
		}

		.banner {
			padding-top: 30rpx;
			position: fixed;
			width: 690rpx;
			z-index: 1;

			.indicator {
				display: flex;
				justify-content: center;

				&__dot {
					height: 6rpx;
					width: 6rpx;
					border-radius: 100px;
					background-color: rgba(255, 255, 255, 0.35);
					margin: 0 5px;
					transition: background-color 0.3s;
					opacity: 0.31;

					&--active {
						background-color: #ffffff;
						width: 20rpx;
						opacity: 1;
					}
				}
			}
		}

		.menu {
			padding: 0 30rpx;

			.menu-item-title {
				margin-top: 20rpx;
				font-size: 22rpx;
			}
		}

		.menu2 {
			padding: 0 30rpx;

			.menu-item {
				width: 335rpx;
				padding: 36rpx 16rpx 36rpx 40rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 152rpx;

				.menu-item-title1 {
					font-size: 26rpx;
					color: #1D2B1E;
					margin-bottom: 10rpx;

				}

				.menu-item-title2 {
					font-size: 22rpx;
					color: #6D6D6D;
				}
			}

			.menu-item1 {

				background-color: #E9FCF7;
			}

			.menu-item2 {

				background-color: #FFFCEC;
			}
		}

		.list {
			padding: 0 30rpx;

			.list-item {
				padding: 25rpx 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 9rpx 0rpx rgba(197, 197, 197, 0.14);
				border-radius: 16rpx;
				margin-top: 20rpx;

				.item-top {
					border-bottom: 1px dashed $borderColor;
					margin-bottom: 16rpx;

					.userinfo {
						flex: 1;
						margin-left: 20rpx;
						padding-bottom: 20rpx;

						.name {
							margin-right: 10rpx;
						}

						.money {
							color: #FF2C1A;
							font-weight: bold;
						}

						.sub-list {
							display: flex;
							align-items: center;
							margin: 20rpx 0;
						}

						.sub-item {
							flex-shrink: 0;
							margin-right: 10rpx;
							padding: 8rpx 20rpx;

							background: #FBFBFB;
							border-radius: 8rpx;
							color: #4A4A4A;
						}

						.bg1 {
							background-color: #ECFFFA;
							color: #00C690;
						}

						.bg2 {
							background-color: #FFFCEC;
							color: #FA7C13;
						}
					}
				}

				.item-bottom {
					color: #707070;
				}
			}
		}

		.teacher {
			width: 750rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			padding-bottom: 50rpx;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;

			.title {
				color: #252525;
				font-weight: bold;
				padding: 30rpx 0;
				border-bottom: 1px solid #E2E2E2;

				.serial {
					width: 6rpx;
					height: 25rpx;
					background: #00C690;
					border-radius: 5rpx;
					margin-right: 13rpx;
				}
			}
		}
	}
</style>